<script setup>
import { countDeviceNum } from "@/api";
import Chart from "@/components/Chart/index.vue";
import textNumCol from '@/components/text-num-col'
const options = ref({})
options.value = {
  // color: ['#2db7f5', '#ff6600', '#921AFF', '#c32441', '#FF00FF', '#FF8EFF', '#53FF53'],
  color: ['#002a94', '#6eb5ef', '#ffce00', '#FF00FF', '#47ffff', '#8630f5'],
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} 万㎡',
    fontSize: 26
    
  },
  series: [
    {
      name: '单位：万㎡',
      type: 'pie',
      selectedMode: 'single',
      radius: ['20%', '35%'],
      label: {
        formatter: '{a|{b}}\n  {b|{c}}',
        position: 'inner',
        color:'#03e5fa',
        rich: {
          a: {
            color: '#fff',
            // padding: [3, 4],
            fontSize: 18,
            align: 'center'
          },
          b: {
            color: '03e5fa',
            fontSize: 20,
            fontWeight: 'bold',
            // padding: [3, 4],
            align: 'left'
          }
        }
      },
      labelLine: {
        length: 15
      },
      data: [
        { value: 1000.11, name: '居民入网面积' },
        { value: 2000.11, name: '公建入网面积' }
      ]
    },
    {
      name: '单位：万㎡',
      type: 'pie',
      radius: ['60%', '75%'],
      labelLine: {
        length: 10
      },
      label: {
        // formatter: '{a|{b}}\n  {b|{c}}{per|万㎡} ',
        position: 'outside',
        formatter: '{a|{b}}\n  {b|{c}}',
        backgroundColor: '#0b1c35',
        borderColor: 'inherit',
        borderWidth: 1,
        fontSize: 16,
        borderRadius: 4,
        rich: {
          a: {
            color: '#fff',
            padding: [7, 5, 0],
            lineheight: '30px',
            align: 'center',
            fontSize: 18,
          },
          b: {
            color: '#03e5fa',
            fontSize: 20,
            fontWeight: 'bold',
            padding: [3, 4],
            align: 'left'
          }
        }
      },
      data: [
        { value: 1000.11, name: '居民收费面积' },
        { value: 2000.11, name: '公建收费面积' },
        { value: 1000.11, name: '居民报停面积' },
        { value: 3000.11, name: '公建报停面积' }
      ]
    }
  ]
};
onMounted(() => {
  // echarts初始化
})
const ranqiData = {}
const grData = {}
const getData = () => {
  const ranqi = [
    [{
      num: 430.1,
      name: '用户总数',
      unit: '万户',
      span: 8
    },{
      num: 200.1,
      name: '居民用户总数',
      unit: '万户',
      span: 8
    },{
      num: 200.1,
      name: '商业用户总数',
      unit: '万户',
      span: 8
    }],[{
      num: 17.2,
      name: '安检完成用户数',
      unit: '万户',
      span: 8
    },{
      num: 40.11,
      name: '安检完成率',
      unit: '%',
      span: 8
    },{
      num: 40.11,
      name: 'NB-Iot表替换率',
      unit: '%',
      span: 8
    }],[{
      num: 10,
      name: '营业厅数量',
      unit: '座',
      span: 12
    },{
      num: 11,
      name: '服务中心数量',
      unit: '座',
      span: 12
    }]
  ]
  ranqiData.value = {
    title: '燃气',
    value: ranqi
  }
  const gongre = [
    [{
      num: 210,
      name: '用户总数',
      unit: '万户',
      span: 6
    },{
      num: 1000.11,
      name: '居民用户总数',
      unit: '万户',
      span: 6
    },{
      num: 1000.11,
      name: '商业用户总数',
      unit: '万户',
      span: 6
    },{
      num: 10000.11,
      name: '入网总面积',
      unit: '万㎡',
      span: 6
    }],[{
      num: 10,
      name: '营业厅数量',
      unit: '座',
      span: 12
    },{
      num: 11,
      name: '服务中心数量',
      unit: '座',
      span: 12
    }]
  ]
  grData.value = {
    title: '供热',
    value: gongre
  }
};
getData();
</script>

<template>
  <div class="right-top flex">
    <textNumCol :datas="ranqiData"></textNumCol>
    <textNumCol :datas="grData">
        <Chart
          :width="'600px'"
          :height="'340px'"
          :option="options"
          id="my-echarts"
          style="margin: 0 auto !important;"
        />
    </textNumCol>
  </div>
</template>

